<template>
	<view class="index">
		<!-- 	<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Home ref="home"></Home>
			</scroll-view>
		</view> -->
		<!-- <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Menu ref="menu"></Menu>
			</scroll-view>
		</view> -->

		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - ${safeBottom}px / 2)`}" scroll-y
				enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Menu ref="menu"></Menu>
			</scroll-view>
		</view>

		<!-- <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Todo ref="todo"></Todo>
			</scroll-view>
		</view> -->

		<!-- <u-tabbar :value="currentIndex" :fixed="false" activeColor="#51d0d0" inactiveColor="#707070"
			@change="switchTabbar">
			<u-tabbar-item v-for="(item,index) in tabbarList" :text="item.title"
				:icon="currentIndex===index ? item.activeIcon : item.inactiveIcon"></u-tabbar-item>
		</u-tabbar> -->
	</view>
</template>

<script>
	import Home from './home.vue'
	import Menu from './menu.vue'
	import Todo from './todo.vue'

	export default {
		components: {
			Home,
			Menu,
			Todo,
		},

		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [
					// {
					// 	title: '首页',
					// 	activeIcon: 'home-fill',
					// 	inactiveIcon: 'home'
					// },
					{
						title: '应用',
						activeIcon: 'grid-fill',
						inactiveIcon: 'grid'
					},
					{
						title: '待办',
						activeIcon: 'chat-fill',
						inactiveIcon: 'chat'
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [],
				safeBottom: 0 // 安全底部
			}
		},
		onLoad(options) {
			// console.log(options);
			this.$store.commit('ChangeAndSetStateData', {
				Name1: 'CurrModuleID',
				data: options.moduleID
			})
			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)
		},
		mounted() {
			let that = this;
			that.getSafeBottom();
		},
		methods: {
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
			},

			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
				// console.log(this.tabberPageLoadFlag);
			},

			// 获取安全底部高度
			getSafeBottom() {
				let that = this;
				let safeareaBottom = uni.getStorageSync('safeareaBottom');
				// console.log(safeareaBottom);
				if (safeareaBottom) {
					that.safeBottom = safeareaBottom;
				} else {
					uni.getSystemInfo({
						success: function(res) {
							if (res.safeAreaInsets.bottom) {
								that.safeBottom = res.safeAreaInsets.bottom;
								uni.setStorageSync('safeareaBottom', that.safeBottom)
							}
							// console.log(that.safeBottom);
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		overflow: hidden;
		height: 100vh;
	}

	// .custom-tabbar-page {
	// 	height: calc(100vh - (50px + env(safe-area-inset-bottom) / 2));
	// }
</style>